@db-group-task-node-bg: @panel-bg-2;
@db-group-member-color: #6dbe3b;
@db-group-promotable-color: #488c5d;
@db-group-rehab-color: #5489a8;
@db-group-task-name-color: @text-color;

.fullscreen {
    #databaseGroupGraphContainer {
        width: 100%;
        
        .exit-button {
            display: block;
        }
        
        & > h3 {
            display: block;
        }
    }
}

#databaseGroupGraphContainer {
    min-height: 400px;
    position: relative;
    
    & > h3 {
        display: none;
        position: absolute;
        left: 15px;
        top: 20px;
    }
    
    .exit-button {
        display: none;
        position: absolute;
        right: 15px;
        top: 15px;
    }

    .db-node {
        .node-bg {
            cursor: move;
            transition: .2s fill ease-in-out;
        }

        .catching-up-stroke {
            fill: none;
            stroke-width: 2px;
            stroke-dasharray: 30,17;
            opacity: 0;
        }
        
        .node-tag {
            font-size: 24px;
            text-anchor: middle;
            fill: @gray-base;
            font-weight: bold;
            pointer-events: none;
        }

        .node-icon {
            text-anchor: middle;
            font-size: 34px;
            fill: white;
            pointer-events: none;
        }
        
        &.Member {
            .node-bg {
                fill: @db-group-member-color;
            }
        }

        &.Promotable {
            .node-bg {
                fill: @db-group-promotable-color;
            }
            
            .catching-up-stroke {
                opacity: 1;
                stroke: @db-group-promotable-color;
            }
        }

        &.Rehab {
            .node-bg {
                fill: @db-group-rehab-color;
            }

            .catching-up-stroke {
                opacity: 1;
                stroke: @db-group-rehab-color;
            }
        }

        &.state-danger {
            .node-bg {
                fill: @brand-danger;
            }

            .catching-up-stroke {
                opacity: 0;
            }
        }

        &.state-warning {
            .node-bg {
                fill: @brand-warning;
            }
        }
    }

    .task-node {
        .node-bg {
            fill: @db-group-task-node-bg;
            cursor: move;
            stroke: @db-group-task-node-bg;
        }

        .task-desc {
            font-size: 12px;
            pointer-events: none;
        }

        .task-name {
            fill: @db-group-task-name-color;
            pointer-events: none;
        }

        .task-icon {
            pointer-events: none;
            font-size: 30px;
        }

        &.Replication {
            fill: @external-replication-color;
        }

        &.Backup {
            fill: @backup-color;
        }

        &.RavenEtl {
            fill: @ravendb-etl-color;
        }

        &.SqlEtl {
            fill: @sql-etl-color;
        }

        &.SnowflakeEtl {
            fill: @snowflake-etl-color;
        }

        &.OlapEtl {
            fill: @olap-etl-color;
        }

        &.ElasticSearchEtl  {
            fill: @elastic-etl-color;
        }

        &.KafkaQueueEtl  {
            fill: @kafka-etl-color;
        }

        &.RabbitQueueEtl  {
            fill: @rabbitmq-etl-color;
        }

        &.AzureQueueStorageQueueEtl  {
            fill: @azure-queue-storage-etl-color;
        }

        &.AmazonSqsQueueEtl  {
            fill: @amazon-sqs-etl-color;
        }

        &.AiEtl  {
            fill: @ai-etl-color;
        }

        &.GenAi  {
            fill: @genai-color;
        }

        &.KafkaQueueSink  {
            fill: @kafka-sink-color;
        }

        &.RabbitQueueSink  {
            fill: @rabbitmq-sink-color;
        }

        &.Subscription {
            fill: @subscription-color;
        }
        
        &.PullReplicationAsSink {
            fill: @pull-replication-sink-color;
        }
        
        &.PullReplicationAsHub {
            fill: @pull-replication-hub-color;
        }

        &.Disabled {
            .task-icon {
                fill: grey;
            }

            .task-desc {
                fill: grey;
            }
        }
    }

    .edges {
        line {
            stroke-width: 2px;
            stroke: @db-group-task-node-bg;
            transition: .2s stroke ease-in-out;


            &.Disabled {
                stroke: @brand-warning;
                stroke-dasharray: 3,3;
            }

            &.warning {
                stroke: @brand-warning;
            }

            &.errored {
                stroke: @brand-danger;
            }
        }
    }
}
